<template>
  <div>
    <mt-swipe :auto="6000">
      <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data(){
      return {
        lunbotuList: []
      }
    },
    created(){
      this.getLunbotu()
    },
    methods: {
      getLunbotu(){ 
        // 获取轮播图数据的方法
        this.$http.get('http://vue.studyit.io/api/getlunbo').then(result => {
          if(result.body.status === 0) {
            this.lunbotuList = result.body.message;
            Toast('加载轮播图失败...')
          }else{
            Toast('加载轮播图失败...')
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    .mint-swipe-item {
      &:nth-child(1) {
        background-color: red;
      }
      &:nth-child(2) {
        background-color: green;
      }
      &:nth-child(3) {
        background-color: blue;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
